<template>
  <div class="cfPassword width_100 height_100" v-if="showDialog">
    <div class="passwordDialog">
      <header class="flex-between">
        <span>入会密码</span>
        <img src="@/assets/dialogBox/images/close.png" alt="" class="cp" @click="toggleShow"/>
      </header>
      <div class="content">
        <div class="inputbox">
          <input type="text" placeholder="6位数字密码" :class="{'error': errorMessage}" v-model.number.trim="password"
                 @keyup="resetError"/>
          <p>{{ errorMessage }}</p>
        </div>
      </div>
      <footer class="flex-center">
        <div class="btn-blue2" @click="confirm">确定</div>
        <div class="btn-white2" @click="toggleShow">取消</div>
      </footer>
    </div>
  </div>
</template>

<script>
import { sendSock } from '@/utils/socketSend'

export default {
  data () {
    return {
      password: '' // 入会密码
    }
  },
  computed: {
    // 是否显示密码框
    showDialog () {
      return this.$store.state.common.ifShowInputPassword
    },
    // 密码框下方错误提示
    errorMessage () {
      return this.$store.state.conference.joinCfData.password_error_msg
    }
  },
  methods: {
    // 弹框显示隐藏
    toggleShow () {
      this.$store.commit('common/set_ifShowInputPassword', !this.showDialog)
    },
    // 重置错误信息
    resetError () {
      if (this.errorMessage) {
        this.errorMessage = ''
      }
    },
    confirm () {
      // 确认
      if (!this.password) {
        this.$store.commit('conference/set_joinCfData_code_error_msg', '请输入密码')
      } else {
        sendSock({
          type: '4.1.1',
          body: {
            voiced: this.$store.state.conference.joinCfData.voiced,
            camera: this.$store.state.conference.joinCfData.camera,
            cf_join_type: 1,
            cf_id: this.$store.state.conference.joinCfData.cf_code,
            cf_pwd: this.password
          }
        })
        this.$store.commit('socket/set_operationReqId', 'joinConferenceReqId')
      }
      this.toggleShow()
    }
  }
}
</script>

<style lang="scss" scoped>
.cfPassword {
  position: fixed;
  z-index: 1999;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);

  .passwordDialog {
    width: 560px;
    height: 300px;
    background: #ffffff;
    border-radius: 4px;
    padding: 20px;
    margin: 261px auto 0;

    header {
      span {
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #0D172C;
        letter-spacing: 0px;
      }

      img {
        width: 16px;
      }
    }

    .content {
      margin-top: 60px;

      .inputbox {
        text-align: center;

        input {
          width: 400px;
          height: 44px;
          opacity: 1;
          border: 1px solid #d8dee9;
          border-radius: 3px;
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #0D172C;
          line-height: 44px;
          letter-spacing: 0px;
          padding-left: 16px;
        }

        .error {
          border: 1px solid #ff2929;
        }

        p {
          margin: 5px auto 0;
          width: 400px;
          height: 17px;
          opacity: 1;
          font-size: 12px;
          font-family: PingFangTC, PingFangTC-Regular;
          font-weight: 400;
          text-align: left;
          color: #ff2929;
          line-height: 17px;
        }
      }
    }

    footer {
      margin-top: 57px;
    }
  }
}
</style>
